<template>
    <div style="display:flex">
        <div style="margin-left:20px">
            <div id="container" style="width:400px;height:315px;background-color:white;margin-top:20px;box-shadow:2px 2px 5px rgba(0, 0, 0, .1)"></div>
            <div id="container_1" style="padding-left:50px;padding-top:8px;width:400px;height:315px;background-color:white;margin-top:40px;box-shadow:2px 2px 5px rgba(0, 0, 0, .1)"></div>
        </div>  
        <div id="table" style="width:800px;height:670px;background-color:white;box-shadow:2px 2px 5px rgba(0, 0, 0, .1);margin-top:20px;margin-left:20px">
            <a-table
              :columns="columns"
              :data-source="data"
              :pagination="{ pageSize: 50 }"
              :scroll="{ y: 550 }"
            />
        </div>
    </div>
</template>

<script>
const columns = [
  {
    title: '房间号',
    dataIndex: 'room',
  },
  {
    title: '报警时间',
    dataIndex: 'time',
    defaultSortOrder: 'descend',
    sorter: (a, b) => a.time - b.time,
  },
  {
    title: '报警类型',
    dataIndex: 'type',
    filters: [
      {
        text: '湿度过高',
        value: '湿度过高',
      },
      {
        text: '湿度过低',
        value: '湿度过低',
      },
      {
        text: '温度过高',
        value: '温度过高',
      },
      {
        text: '温度过低',
        value: '温度过低',
      },
      {
        text: '疑似盗窃',
        value: '疑似盗窃',
      },
    ],
    filterMultiple: false,
    onFilter: (value, record) => record.address.indexOf(value) === 0,
    sorter: (a, b) => a.address.length - b.address.length,
    sortDirections: ['descend', 'ascend'],
  },
];

const data = [];

import { Pie,RingProgress } from '@antv/g2plot';
export default {
    data(){
        return{
            humiWarnList:{
                count:3,
                list:[
                    {
                        room:114,
                        status:'nok',
                        type:'湿度过高',
                        time:1145141919.0,
                    },
                    {
                        room:514,
                        status:'nok',
                        type:'湿度过低',
                        time:1145141919.0,
                    },
                    {
                        room:810,
                        status:'nok',
                        type:'湿度过高',
                        time:1145141919.0,
                    },
                    {
                        room:114,
                        status:'ok',
                        type:'湿度过高',
                        time:1145141919.0,
                    },
                ]
            },
            tempWarnList:{
                count:2,
                list:[
                    {
                        room:514,
                        status:'nok',
                        type:'温度过高',
                        time:1145141919.0,
                    },
                    {
                        room:810,
                        status:'nok',
                        type:'温度过高',
                        time:1145141919.0,
                    },
                    {
                        room:114,
                        status:'ok',
                        type:'温度过低',
                        time:1145141919.0,
                    },
                ]
            },
            stealWarnList:{
                count:1,
                list:[
                    {
                        room:114,
                        status:'nok',
                        type:'疑似盗窃',
                        time:1145141919.0,
                    },
                    {
                        room:514,
                        status:'ok',
                        type:'疑似盗窃',
                        time:1145141919.0,
                    },
                    {
                        room:810,
                        status:'ok',
                        type:'疑似盗窃',
                        time:1145141919.0,
                    },
                    {
                        room:114,
                        status:'ok',
                        time:1145141919.0,
                    },
                ]
            },
            checkInfo:{
                checked:234,
                unchecked:20
            },
            data,
            columns,
        }
    },
    mounted(){
        this.piePaint();
        this.circlePaint();
        this.updateData();
    },
    methods:{
        piePaint(){
            const data = [
              { type: '湿度异常', value: this.humiWarnList.count },
              { type: '温度异常', value: this.tempWarnList.count },
              { type: '安全报警', value: this.stealWarnList.count },
            ];

            const piePlot = new Pie('container', {
              appendPadding: 10,
              data,
              angleField: 'value',
              colorField: 'type',
              radius: 0.8,
              label: {
                type: 'inner',
                offset: '-30%',
                content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
                style: {
                  fontSize: 14,
                  textAlign: 'center',
                },
              },
              interactions: [{ type: 'element-active' }],
            });

            piePlot.render();
        },
        circlePaint(){
            const ringProgress = new RingProgress('container_1', {
              height: 300,
              width: 300,
              autoFit: false,
              percent: this.checkInfo.checked/(this.checkInfo.checked+this.checkInfo.unchecked),
              color: ['#F4664A', '#E8EDF3'],
              innerRadius: 0.85,
              radius: 0.98,
              statistic: {
                title: {
                  style: { color: '#363636', fontSize: '18px', lineHeight: '22px' },
                  formatter: () => '报寝进度',
                },
              },
            });

            ringProgress.render();
        },
        updateData(){
            this.data = this.humiWarnList.list.concat(this.tempWarnList.list.concat(this.stealWarnList.list))
            console.log(this.data);
        }
    }
}
</script>

<style lang="scss" scoped>

</style>